<template>
    <div class="product">
         <!-- 个人信息 -->
         <div class="user-info">
            <!-- 头像 -->
            <div class="ava-info">
                <div class="avatar">
                    <el-avatar shape="square" :size="100" fit="fill" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
                </div>
                <!-- 名称等 -->
                <div class="info">
                    <!-- 用户昵称 -->
                    <div class="nick-name">
                        cch
                    </div>
                    <!-- 加入时间 -->
                    <div class="time">
                        2024-04-04 12:00 发布
                    </div>
                    <!-- 编辑 -->
                    <div class="edit">
                        杭州 拱墅区
                    </div>
                </div>
            </div>
            <!-- 价格信息 & 快递 -->
            <div class="price-send">
                <div class="send">
                    包邮/仅自提
                </div>
                <div class="price">
                    <div class="now">
                        ¥200.00
                    </div>
                    <div class="del">
                        ¥399.99
                    </div>
                </div>
            </div>
        </div>
        <!-- 个人信息END -->

        <!-- 商品信息 -->
        <div class="goods-info">
            <div class="text">
                <!-- 商品标题 -->
                <div class="title">
                    雅诗兰黛眼霜/洗面奶
                </div>
                <!-- 商品详情 -->
                <div class="detail">
                    是打卡合适的舅舅萨芬打开解放军队损公肥私觉得过分的话就放假还是过分解读
                </div>
            </div>
            <!-- 商品图片 -->
            <div class="image">
                <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
            </div>
            <!-- 购买操作 -->
            <div class="buy">
                <div class="buy-btn">
                    <el-button type="warning" size="middle" @click="goToBuy">立即购买</el-button>
                </div>
            </div>
        </div>
        
        <!-- 留言板块 -->
        <div class="comments">
            <!-- 标题 -->
            <div class="title">
                评论
            </div>
            <!-- 个人窗口 -->
            <div class="user">
                <!-- 头像 -->
                <div class="ava">
                    <el-avatar :size="45" src="/avatar/男孩.png"></el-avatar>
                </div>
                <!-- 输入框 -->
                <div class="content">
                    <el-input v-model="textarea" placeholder="留下你的留言" type="textarea"
                        :autosize="{ minRows: 2,maxRows: 4}"
                        maxlength="50"
                        show-word-limit></el-input>
                </div>
                <!-- 发布按钮 -->
                <div class="btn"> 
                    <el-button type="primary" round size="middle">发布</el-button>
                </div>
            </div>
            <!-- 评论列表 -->
            <div class="list">
                <!-- 评论元素 -->
                <div class="cont-item" v-for="(item,index) in contentList">
                    <!-- 头像 -->
                    <div class="ava">
                        <el-avatar :size="45" :src="item.avaurl"></el-avatar>
                    </div>
                    <div class="text">
                        <!-- 昵称 -->
                        <div class="name">
                            {{item.username}} &nbsp;&nbsp;&nbsp;&nbsp;<el-tag size="mini" v-if="item.isAthor">作者</el-tag>
                        </div>
                        <!-- 评论内容 -->
                        <div class="content-info">
                            {{ item.text }}
                        </div>
                        <!-- 时间 -->
                        <div class="time">
                            {{ item.time }}
                        </div>
                        <el-divider class="divider" v-if="index != contentList.length-1"></el-divider>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import {pay} from '@/api/pay'
export default{
    data(){
        return{
            contentList:[
                {
                    avaurl:'/avatar/男孩.png',
                    username:'Apollo',
                    isAthor: true,
                    text:'想要的说',
                    time:'2024-04-05 11:22:39',
                },
                {
                    avaurl:'/avatar/女孩.png',
                    username:'Skadi',
                    isAthor: false,
                    text:'我想要',
                    time:'2024-04-05 11:23:39',
                },
                {
                    avaurl:'/avatar/男孩.png',
                    username:'Apollo',
                    isAthor: true,
                    text:'真的吗',
                    time:'2024-04-05 11:25:39',
                },{
                    avaurl:'/avatar/女孩.png',
                    username:'Skadi',
                    isAthor: false,
                    text:'真的',
                    time:'2024-04-05 11:30:39',
                },
            ]
        }
    },
    created:{

    },
    methods:{
        goToBuy(){
            pay({
                traceNo:new Date().getTime(),
                totalAmount:'1.00',
                subject:'测试商品',
                productCode:'1232321',
            }).then(res=>{
                if(res.code == 200){
                    const divForm = document.getElementsByTagName('div')
                    if (divForm.length) {
                    document.body.removeChild(divForm[0])
                    }
                    const div = document.createElement('div')
                    div.innerHTML = res.result;
                    document.body.appendChild(div)
                    document.forms[0].setAttribute('target','_blank')
                    document.forms[0].submit();
                    this.window.load()
                }
            });
            
        }
    }
}
</script>
<style scoped>
.divider{
    margin: 10px 0;
}
/* 个人信息 */
.product .user-info{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.product .user-info div{
    display: inline;
}
/* 头像和基础信息 */
.product .user-info .ava-info {
    display: flex;
    width: 400px;
}
.product .user-info .ava-info .avatar{
    width: 100px;
}
.product .user-info .ava-info .info{
    height: 100px;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 20px;
}
.product .user-info .ava-info .info .nick-name{
    font-weight: 800;
    font-size: 30px;
    text-align: left;
}
.product .user-info .ava-info .info .time{
    font-size: 14px;
}
.product .user-info .ava-info .info .edit{
    display: flex;
    justify-content: left;
}
.product .user-info .ava-info .info div{
    height: 40px;
    text-align: center;
}
/* 快递和价格 */
.product .user-info .price-send{
    display: flex;
    text-align: right;
    flex-direction: column;
    justify-content: space-between;
}
.product .user-info .price-send .send{
    font-size: 20px;
    font-weight: 500;
}
.product .user-info .price-send .price .now{
    font-size: 25px;
    font-weight: 500;
    color: #e96140;
}
.product .user-info .price-send .price .del{
    color: #b0b0b0;
    text-decoration: line-through;
}
/* 个人信息END */

/* 商品信息 */
.product .goods-info{
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
}
.goods-info .text .title{
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 10px;
}
.goods-info .text .detail{
    margin: 10px 0;
}
/* 商品信息END */


/* 购买操作 */
.product .buy .buy-btn{
    display: flex;
    justify-content: right;
}
/* 购买操作END */

/* 留言模块 */
.product .comments{
    margin: 20px 0;
    background-color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}
.product .comments .title{
    font-size: 30px;
    font-weight: 500;
}
.product .comments .user{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}
.product .comments .user .content{
    width: 400px;
}
/* 留言模块END */

/* 留言列表 */
.product .comments .list{
    margin: 10px 0;
}
.product .comments .list .cont-item{
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}
.product .comments .list .cont-item .ava{
    margin-right: 10px;
}
.product .comments .list .cont-item .text{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.product .comments .list .cont-item .text .name{
    font-size: 16px;
    display: flex;
    align-items: center;
}
.product .comments .list .cont-item .text .content-info{
    margin: 10px 0 5px;
    font-size: 14px;
}
.product .comments .list .cont-item .text .time{
    font-size: 12px;
    color: #b0b0b0;
}
/* 留言列表END */
</style>